<!-- 加载cad转换的矢量切片测试 -->
<template>
  <div id="mapbox-container"></div>
</template>

<script setup>
import { onMounted, getCurrentInstance } from 'vue'
import mapboxgl from '../../components/mapbox/mapbox.js'
import U from 'mapbox-gl-utils'
import axios from 'axios'
import api from '../../api/geoserver'
import * as turf from '@turf/turf'
// import MapboxDraw from '@mapbox/mapbox-gl-draw'
// import MapboxLanguage from '@mapbox/mapbox-gl-language'
import { Threebox, THREE } from 'threebox-plugin'

defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})
let map = null

let mapconfig = null
// const emit = defineEmits(['onload'])
const { proxy } = getCurrentInstance()
const path = import.meta.env.VITE_APP_PATH

onMounted(() => {
  loadConfig()
})

// 同步加载底图配置信息
async function loadConfig() {
  const config = await axios.get(import.meta.env.VITE_APP_PATH + 'config/config.json').catch((err) => console.log(err))
  const style = await axios.get(import.meta.env.VITE_APP_PATH + 'config/whitekb-v0.json').catch((err) => console.log(err))
  console.log(config.data, style)
  mapconfig = proxy.$root.$mapconfig = config.data.schoolMap
  initMap(style.data)
}

// 根据配置信息初始化地图
function initMap(style) {
  const option = mapconfig.campus[1]
  // 初始化创建mapbox地图

  map = new mapboxgl.Map({
    container: 'mapbox-container',
    style: style,
    // style: 'mapbox://styles/mapbox/dark-v11',
    center: [38.2774149, 2.1065327],
    zoom: 5,
    pitch: 0,
    bearing: 0
  })
  // 等map创建完成后加载建筑图层
  map.on('load', function () {
    // Start the animation.
    // rotateCamera(0)

    // 初始化mapbox工具类
    U.init(map)

    // 抛出map创建完成事件
    // emit('onload', map)
    loadDatas()
    // addChartletLyer()
  })
  map.on('click', function (e) {
    // console.log("----click----");
    // console.log(e.point);
    // console.log(e.lngLat);
  })
  map.on('dblclick', function (e) {
    // console.log("----dblclick----");
  })
  map.on('wheel', function () {
    // console.log("----wheel----");
    // console.log(map.getZoom());
  })
}
const parameter = {
  service: 'WFS',
  version: '1.0.0',
  request: 'GetFeature',
  maxFeatures: '10000',
  outputFormat: 'application/json'
}

// 加载图层数据
async function loadDatas() {
  // map.addSource('cadzline_source', {
  //   type: 'raster',
  //   tiles: [
  //     'http://localhost:8080/geoserver/gwc/service/wmts?layer=cadjx:lines&style=&tilematrixset=EPSG:900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:900913:{z}&TileCol={x}&TileRow={y}'
  //   ]
  // })
  map.addSource('cadzpolygons_source', {
    type: 'vector',
    scheme: 'tms',
    tiles: [
      'http://192.168.1.59:8080/geoserver/gwc/service/tms/1.0.0/cadjx:polygons@EPSG:3857@pbf/{z}/{x}/{y}.pbf'
    ]
  })
  map.addLayer({
    id: 'cadzpolygons',
    type: 'fill',
    source: 'cadzpolygons_source',
    'source-layer': 'polygons',
    'layout': {
    },
    'paint': {
      'fill-color': '#dddddd',
      'fill-opacity': 1,
      'fill-outline-color': ['get', 'rgb']
    }
  })

  map.addSource('cadzline_source', {
    type: 'vector',
    scheme: 'tms',
    tiles: [
      'http://192.168.1.59:8080/geoserver/gwc/service/tms/1.0.0/cadjx:lines@EPSG:3857@pbf/{z}/{x}/{y}.pbf'
    ]
  })
  map.addLayer({
    id: 'cadzline',
    type: 'line',
    source: 'cadzline_source',
    'source-layer': 'lines',
    'layout': {
      'line-join': 'round',
      'line-cap': 'round'
    },
    'paint': {
      'line-color': ['get', 'rgb'],
      'line-width': 1
    }
  })

  map.addSource('cadzpoint_source', {
    type: 'vector',
    scheme: 'tms',
    tiles: [
      'http://192.168.1.59:8080/geoserver/gwc/service/tms/1.0.0/cadjx:points@EPSG:3857@pbf/{z}/{x}/{y}.pbf'
    ]
  })
  // map.addLayer({
  //   'id': 'cadzpoint',
  //   'type': 'circle',
  //   'source': 'cadzpoint_source',
  //   'source-layer': 'points',
  //   paint: {
  //     'circle-radius': 2,
  //     'circle-color': '#000000'
  //   }
  // })
  // map.addLayer({
  //   'id': 'cadzpoint_lable',
  //   'type': 'symbol',
  //   'source': 'cadzpoint_source',
  //   'source-layer': 'points',
  //   layout: {
  //     'text-field': ['get', 'text_str'], // 显示 name 字段的值作为文本标注
  //     'text-offset': [0, 0], // 文本标注的偏移量
  //     'text-anchor': 'bottom-left', // 文本标注的锚点在文本框的顶部
  //     'text-size': ['get', 'text_size'],
  //     'text-font': ['Microsoft YaHei']
  //   },
  //   paint: {
  //     'text-color': ['get', 'rgb'] // 文本颜色
  //   }
  // })

  map.addSource('cadtextPolygons_source', {
    type: 'vector',
    scheme: 'tms',
    tiles: [
      'http://192.168.1.59:8080/geoserver/gwc/service/tms/1.0.0/cadjx:textPolygons@EPSG:3857@pbf/{z}/{x}/{y}.pbf'
    ]
  })
  map.addLayer({
    id: 'textPolygons',
    type: 'fill',
    source: 'cadtextPolygons_source',
    'source-layer': 'textPolygons',
    'layout': {
    },
    'paint': {
      'fill-color': ['get', 'rgb'],
      'fill-opacity': 1,
      'fill-outline-color': ['get', 'rgb']
    }
  })


  // map.addLayer({
  //   id: 'wms-test-layer',
  //   type: 'raster',
  //   source: 'cadzline_source',
  //   paint: {}
  // })


  // parameter.typeName = 'sqsfgx:dlmc_point'
  // const roadData = await api
  //   .getLayerData('sqsfgx', parameter)
  //   .catch((err) => console.log(err))

  // map.addSource('dlmc_point', {
  //   type: 'geojson',
  //   data: roadData
  // })
  // console.log('roomData', roomData)

  // map.addSource('roomData', {
  //   type: 'geojson',
  //   data: roomData
  // })
  // map.addLayer({
  //   id: 'buildings',
  //   type: 'fill-extrusion', //设置当前图层类型 此为边
  //   source: 'roomData',
  //   layout: {
  //     visibility: 'visible' //是否显影
  //   },
  //   paint: {
  //     //设置属性
  //     'fill-extrusion-color': ['get', 'color'],
  //     'fill-extrusion-height': [
  //       'interpolate',
  //       ['linear'],
  //       ['zoom'],
  //       15,
  //       0,
  //       15.05,
  //       ['get', 'height']
  //     ],
  //     'fill-extrusion-base': [
  //       'interpolate',
  //       ['linear'],
  //       ['zoom'],
  //       15,
  //       0,
  //       15.05,
  //       ['get', 'min_height']
  //     ],
  //     'fill-extrusion-opacity': 0.6
  //   }
  // })

  // parameter.typeName = 'sqsf:outside_jianzhuwu'
  // const outbuildingData = await api
  //   .getLayerData('sqsf', parameter)
  //   .catch((err) => console.log(err))

  // map.addSource('outside_jianzhuwu', {
  //   type: 'geojson',
  //   data: outbuildingData
  // })
  // map.addLayer({
  //   id: 'outbuildings',
  //   type: 'fill-extrusion', //设置当前图层类型 此为边
  //   source: 'outside_jianzhuwu',
  //   layout: {
  //     visibility: 'visible' //是否显影
  //   },
  //   paint: {
  //     //设置属性
  //     'fill-extrusion-color': '#bfeeec',
  //     'fill-extrusion-height': [
  //       'interpolate',
  //       ['linear'],
  //       ['zoom'],
  //       15,
  //       0,
  //       15.05,
  //       ['get', 'height']
  //     ],
  //     'fill-extrusion-base': [
  //       'interpolate',
  //       ['linear'],
  //       ['zoom'],
  //       15,
  //       0,
  //       15.05,
  //       ['get', 'min_height']
  //     ],
  //     'fill-extrusion-opacity': 0.6
  //   }
  // })

  // map.loadImage('/images/lable/lable1.png', (error, image) => {
  //   if (error) {
  //     throw error
  //   }
  //   // Add the loaded image to the style's sprite with the ID 'kitten'.
  //   map.addImage('lable-1', image, {
  //     stretchX: [
  //       [28, 48],
  //       [86, 106]
  //     ],
  //     stretchY: [[15, 45]],
  //     content: [28, 15, 106, 45],
  //     pixelRatio: 2
  //   })
  //   map.addLayer({
  //     id: 'original',
  //     type: 'symbol',
  //     source: 'dlmc_point',
  //     layout: {
  //       'text-field': ['get', 'name'],
  //       'icon-image': 'lable-1',
  //       'icon-text-fit': 'both',
  //       'icon-allow-overlap': false,
  //       'text-allow-overlap': false,
  //       'text-size': 12
  //     },
  //     paint: {
  //       'text-color': 'rgb(54,153,255)'
  //     }
  //   })
  // })

  // parameter.typeName = 'sqsf:shumu'
  // const treeData = await api
  //   .getLayerData('sqsf', parameter)
  //   .catch((err) => console.log(err))

  // console.log('树木', treeData)
  // map.addSource('shumu', {
  //   type: 'geojson',
  //   data: treeData
  // })

  // map.addLayer({
  //   id: 'shumu',
  //   type: 'symbol',
  //   source: 'shumu',
  //   layout: {
  //     'icon-image': ['get', 'alias'],
  //     'icon-allow-overlap': false,
  //     'text-allow-overlap': false
  //   }
  // })

  // parameter.typeName = 'sqsf:jianzhuwulabel'
  // const buildingLabelData = await api
  //   .getData2(parameter)
  //   .catch((err) => console.log(err))

  // map.addSource('jianzhuwulabel', {
  //   type: 'geojson',
  //   data: buildingLabelData
  // })
  // map.addLayer({
  //   id: 'jianzhuwulabel',
  //   type: 'symbol',
  //   source: 'jianzhuwulabel',
  //   layout: {
  //     'text-field': ['get', 'name'],
  //     'text-size': 11,
  //     'text-letter-spacing': 0.2,
  //     'text-offset': [0, -1]
  //   },
  //   paint: {
  //     'text-color': '#181818',
  //     'text-halo-color': 'rgba(255, 255,255, 1)', // 光影效果
  //     'text-halo-width': 1.5 // 光影效果
  //   }
  // })

  // map.U.clickLayer('buildings', (e) => {
  //   removePopups()
  //   const name = e.features[0].properties.name
  //   // console.log('featureProperties', e);
  //   // const position2D = featureProperties.lonlatTwodim.split(',')

  //   if (name) {
  //     const popupHtml2D = '<div class="popup-simple">' + name + '</div>',
  //       popup = new mapboxgl.Popup({
  //         className: 'map-click-popup',
  //         maxWidth: '400px',
  //         closeButton: false,
  //         offset: [0, -15]
  //       }).setHTML(popupHtml2D)

  //     popup.setLngLat(e.lngLat).addTo(map)
  //     popups.push(popup)
  //   }
  //   e.preventDefault()
  // })
}

// 加载贴图建筑
async function addChartletLyer() {
  window.tb = new Threebox(map, map.getCanvas().getContext('webgl'), {
    defaultLights: true
  })
  const parameter = {
    service: 'WFS',
    version: '1.0.0',
    request: 'GetFeature',
    maxFeatures: '10000',
    outputFormat: 'application/json',
    typeName: 'zzdx:building_simple'
  }
  const data = await api.getLayerData('zzdx', parameter).catch((err) => console.log(err))

  // molayersData = layerJson.data
  // setTimeout(() => {
  // addChartletLayer(data.features)
  // }, 100)
}

function addChartletLayer(features) {
  map.addLayer({
    id: 'sqsfchartlet_layer',
    type: 'custom',
    renderingMode: '3d',
    onAdd: function (map, mbxContext) {
      // addBuildings(features)
    },
    render: function (gl, matrix) {
      tb.update()
    }
  })
}


</script>

<style>
#mapbox-container {
  width: 100vw !important;
  height: 100vh !important;
}
</style>
